<template>
  <div class="houseCustom">
    <div class="houseCustomMsg">
      <h2>房屋定制</h2>
      <el-form v-model="house" :inline="true" label-position="top">
        <el-form-item class="inp" label="所在地">
          <el-select v-model="house.city" class="info">
            <el-option label="成都" value="成都"></el-option>
            <el-option label="北京" value="北京"></el-option>
            <el-option label="上海" value="上海"></el-option>
            <el-option label="广州" value="广州"></el-option>
            <el-option label="深圳" value="深圳"></el-option>
            <el-option label="杭州" value="杭州"></el-option>
            <el-option label="南京" value="南京"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="inp" label="房屋配置">
          <el-select v-model="house.custom" class="info">
            <el-option label="一室一厅" value="一室一厅"></el-option>
            <el-option label="二室一厅" value="二室一厅"></el-option>
            <el-option label="三室一厅" value="三室一厅"></el-option>
            <el-option label="三室两厅" value="三室两厅"></el-option>
            <el-option label="四室两厅" value="四室两厅"></el-option>
            <el-option label="五室两厅" value="五室两厅"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item class="inp" label="房屋面积">
          <el-select v-model="house.capacity" class="info">
            <el-option label="40-80m²" value="80m²"></el-option>
            <el-option label="80-120m²" value="80-120m²"></el-option>
            <el-option label="120m²以上" value="120m²"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item class="inp" label="房屋朝向">
          <el-select v-model="house.face" class="info">
            <el-option label="朝南" value="朝南"></el-option>
            <el-option label="朝北" value="朝北"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item class="inp" label="房屋地段">
          <el-select v-model="house.lot" class="info">
            <el-option label="近市区" value="近市区"></el-option>
            <el-option label="近学校" value="近学校"></el-option>
            <el-option label="近医院" value="近医院"></el-option>
            <el-option label="近公园" value="近公园"></el-option>
            <el-option label="交通便利" value="交通便利"></el-option>
            <el-option label="郊区" value="郊区"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item class="inp" label="建成日期">
            <el-select v-model="house.buildTime" class="info">
              <el-option label="2010年以前" value="2010以前"></el-option>
              <el-option label="2010-2015" value="2010-2015"></el-option>
              <el-option label="2015年以后" value="2015以后"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item class="inpOther" label="其他内容" >
          <el-input v-model="house.otherInfo" placeholder="请输入你的额外要求，最多不超过5条" rows="7" style="width: 100%" type="textarea"></el-input>
        </el-form-item>
        <br>
        <el-form-item>
          <el-button style="background-color: #4760ff;width: 110px;position: center" type="primary" @click="saveInfo">保 存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

</template>

<script>
import axios from "axios";

export default {
  name: "HouseCustom",

  data(){
    return {
      house:{
        city:'',
        custom:'',
        capacity:'',
        face:'',
        lot:'',
        buildTime:'',
        otherInfo:'',
      },
      role:'',
      pageNum: 1,
      pageSize: 3,
      allList:[],
      currentList:[],
    }
  },
  methods: {

    handleSizeChange(size) {
      //console.log("当前显示数据数量为：",size)
      this.pageSize = size;
      this.handlePage(1,size)
    },

    //分页
    handlePage(page) {
      //console.log("当前页显示大小为：",this.pageSize);
      const start = (page - 1) * this.pageSize;
      const end = page * this.pageSize;
      this.currentList = this.allList.slice(start, end);
    },

    saveInfo(){
      axios({
        url:'/custom/save',
        method:'post',
        data:this.house
      }).then(res=>{
        if (res.code === '200'){
          this.$message.success("房屋定制信息以申请，请等待！")
          this.house  = {}
        }else{
          this.$message.error(res.msg)
        }
      })
    },


    //状态class
    getStatusType(status) {
      switch (status) {
        case -1:
          return 'status3';
        case 1:
          return 'status2';
        case -3:
          return 'status4';
        case -2:
          return 'status4';
      }
    },

    getOrderStatus(status){
      switch (status) {
        case -1:
          return "待接收";
        case 1:
          return "已接收";
      }
    },
  }
}
</script>

<style scoped>
.houseCustom{
  width: 1150px;
  min-height: 750px;
  background-color: white;
  padding: 20px 50px;
}

.houseCustomMsg{
  width: 1050px;
  height: 720px;
  background-color: white;
  border-radius: 15px;
  padding: 20px 100px;
  box-shadow: 0 0px 14px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.houseCustomMsg h2{
  font-size: 20px;
  font-weight: 600;
  margin-buttom: 15px;
  margin-left: 0px;
}

.inp{
  width: 500px;
  padding-right: 0px;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: medium;
}

.inpOther{
  width: 1005px;
  padding-right: 0px;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: medium;
}

.info{
  width: 500px;
}
.el-input{
  font-size: medium;
}

/deep/ .el-input.is-disabled .el-input__inner{
  /*background-color: #dbe0e8 !important*/
  background-color: #dbe0e8;
  color: #666565;
}
</style>